<template>
  <div class="NotFound">
    <h1><span class="red">404</span> Not Found</h1>
    <h1 class="notice">同志，请不要乱动网址</h1>
    <div class="down">
      <h3>点击猫猫返回主页</h3>
      <h3>↓↓↓↓↓↓</h3>
    </div>
    <img @click="Back" class="img" src="/cat.png" />
  </div>

</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const Back = () => {
  router.push('/')
}
</script>

<style lang="less" scoped>
.NotFound {
  width: 320px;
  height: 320px;
  margin: auto;
  text-align: center;
  animation: animation .7s linear alternate;

  .red {
    color: #ff0000;
  }

  .down {
    color: #000;
  }

  .img {
    width: 280px;
    height: 230px;
    transition: all .3s;
    cursor: pointer;

    &:hover {
      transform: scale(1.1);
      border: 2px solid #000;
    }
  }

  .Back {
    width: 200px;
    height: 50px;
  }
}

@keyframes animation {
  0% {
    transform: scale(3);
    opacity: 0.1;
  }

  25% {
    transform: scale(2);
    opacity: 0.5;
  }

  50% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>